{% extends "base.html" %}

{% block title %}修改密码 - 车辆管理系统{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row mb-4">
        <div class="col">
            <h2>修改密码</h2>
            <p class="text-muted">更新您的登录密码</p>
        </div>
        <div class="col-auto d-flex align-items-center">
            <a href="{{ url_for('user_profile') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回个人资料
            </a>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="card">
                <div class="card-header bg-warning text-dark">
                    <h4 class="mb-0">修改密码</h4>
                </div>
                <div class="card-body">
                    <form action="{{ url_for('change_password') }}" method="post">
                        <div class="mb-3">
                            <label for="current_password" class="form-label">当前密码</label>
                            <input type="password" class="form-control" id="current_password" name="current_password" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="new_password" class="form-label">新密码</label>
                            <input type="password" class="form-control" id="new_password" name="new_password" required minlength="6">
                            <div class="form-text">请设置至少6位字符的密码</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="confirm_password" class="form-label">确认新密码</label>
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password" required minlength="6">
                        </div>
                        
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i> 密码修改成功后，将需要使用新密码重新登录。
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-warning">修改密码</button>
                            <a href="{{ url_for('user_profile') }}" class="btn btn-secondary">取消</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const newPassword = document.getElementById('new_password');
        const confirmPassword = document.getElementById('confirm_password');
        
        // 添加密码一致性验证
        confirmPassword.addEventListener('input', function() {
            if (this.value !== newPassword.value) {
                this.setCustomValidity('两次输入的密码不一致');
            } else {
                this.setCustomValidity('');
            }
        });
        
        newPassword.addEventListener('input', function() {
            if (confirmPassword.value && confirmPassword.value !== this.value) {
                confirmPassword.setCustomValidity('两次输入的密码不一致');
            } else {
                confirmPassword.setCustomValidity('');
            }
        });
    });
</script>
{% endblock %} 